<template>
  <section class="house-container">
    <div class="cell-container">
      <BaseSearchBar :col="3" :items="searchItems" />
    </div>
    <div class="cell-container">
      <BaseTable
        :columns="columns"
        :page="page"
        :data="tableData"
        @pageChange="onPageChange"
      />
    </div>
  </section>
</template>

<script>
import { columns } from "./columns.js";
import { searchItems } from "./searchItems.js";
import BaseSearchBar from "@/components/baseSearchBar";

export default {
  name: "house",
  components: { BaseSearchBar },
  data() {
    return {
      columns,
      searchItems,
      tableData: [{}],
      page: { total: 0, pageSize: 10, currentPage: 1 },
    };
  },
  methods: {
    onPageChange() {},
  },
};
</script>

<style lang="scss" scope>
.house-container {
  padding: 5px;
  .cell-container {
    margin-bottom: 35px;
  }
}
</style>
